<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <style>
    body {
      text-align: center;
    }

    table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      border: 2px solid #3399ff;
    }

    th,
    td {
      border: 1px solid #3399ff;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #007acc;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #e6f2ff;
    }

    tr:hover {
      background-color: #b3d9ff;
    }

    a {
      display: inline-block;
      text-decoration: none;
      color: #007bff;
      padding: 10px;
      border: 1px solid #007bff;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap;
      /* 防止内容过长时换行 */
    }

    a:hover {
      background-color: #007bff;
      color: white;
    }

    .del {
      display: inline-block;
      text-decoration: none;
      color: #FF4500;
      padding: 10px;
      border: 1px solid #FF4500;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap;
      /* 防止内容过长时换行 */
    }

    .del:hover {
      background-color: #FF4500;
      color: white;
    }

    .search-container {
      text-align: center;
      margin-top: 20px;
    }

    .search-input {
      width: 300px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>

<body>
  <% include ../header.ejs %>
    <h1 style="text-align: center">用户列表</h1>
    <!-- <a href="/">首页</a> -->
    <a href="/user/insert">添加数据</a>
    <br />
    <table width="100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>别名</th>
          <th>删除</th>
          <th>编辑</th>
        </tr>
      </thead>


      <tbody>
        <%data.forEach(function (item, index) { %>
          <tr>
            <td>
              <%= item.id %>
            </td>
            <td>
              <%= item.username %>
            </td>
            <td>
              <%= item.nikename %>
            </td>
            <td><a class='del' href="/user/delete/<%= item.id %>">删除</a></td>
            <td><a href="/user/edit/<%= item.id %>">编辑</a></td>
          </tr>
          <% }); %>
      </tbody>
    </table>

</body>

</html>